<script setup>
import {useRouter} from 'vue-router'
const router = useRouter();
const goLogin = () => {
  console.log('goLogin');
  router.push('/login');
}
</script>


<template>

  <video src="@/assets/boy.mp4" autoplay muted loop></video>

  <div class="vertical-center">
    <el-button type="primary" round size="large" @click="goLogin()">Explore</el-button>
  </div>
</template>

<style scoped>
/* 视频样式 */
video {
  position: fixed; /* 除去右侧的滚动条 */
  z-index: -1; /* 调整z-index确保视频在页面底部 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频按比例填充容器且完全覆盖 */
  overflow: hidden /* 隐藏滚动条，有时不用也可以 */
}

/* 按钮位置 */
.vertical-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 确保整个视窗高度 */
}

/* 按钮样式 */
.el-button {
  border-color: black;
  /*让按钮透明，文字不透明*/
  background-color: rgba(0, 0, 0, 0);
  color: #287fb9;
  font-family: Arvo;
  /* 按钮和字体大小 */
  --el-button-size: 80px;
  --el-font-size-base: 30px;
}

.el-button:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}


</style>